<template>
  <div class="container-403">
    <img src="@/assets/status/403.svg" />
    <div class="ml-12">
      <div
        style="font-size: 40px"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 100,
          },
        }"
      >
        403
      </div>
      <div
        class="text-gray"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 300,
          },
        }"
      >
        抱歉，你无权访问该页面
      </div>
      <el-button
        type="primary"
        @click="$router.push('/')"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 500,
          },
        }"
      >
        返回首页
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: '403',
})
</script>

<style lang="scss" scoped>
.container-403 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .ml-12 {
    margin-left: 35px;

    .text-gray {
      margin: 15px 0;
      color: #6b7280;
    }
  }
}
</style>
